<template>
  <frame-view :class="$theme==='one'?'index':'indexTwo'" showTabbar>

    <p class="title" style="margin-left: 8px">产品名称</p>
    <van-notice-bar
      @click="goPage('/index/message')"
      color="#222222" :background="$theme==='one'?'#d7e9fe':'#e0f1ee'" mode="link" :left-icon="image" class="laba"
                    style="margin-top: 44px;border-radius: 32px;height: 64px" scrollable
                    text="消息内容消息内容消息内容消息内容消息内容消息…" />
    <div style="width: 710px;background: #FFFFFF;border-radius: 20px">
      <div
        style="height: 84px;background: linear-gradient( 151deg, #f8feff 0%, #ebf7ff 100%);margin-top: 24px;border-top-left-radius: 32px;border-top-right-radius: 32px;">
        <div style="height: 84px;line-height: 84px;display: flex;justify-content: space-between">
          <div style="margin-left: 32px;font-weight: 500;
font-size: 36px;
display: flex;
align-items: center;
color: #222222;">
            累计收益
            <img src="./image/查看@2x.png" style="width: 36px;height: 36px;margin-left: 16px">
          </div>
          <div style="font-size: 28px;color: #222222;margin-right: 24px" @click="goPage('/index/earnings')">
            收益明细
            <van-icon name="arrow" color="#222222" />
          </div>

        </div>

      </div>
      <div
        style="font-weight: bold;font-size: 68px;color: var(--primary-color);margin: 62px auto;line-height: 68px;text-align: center">
        <span style="font-size: 48px;">￥</span>7900.00
      </div>
      <div style="display: flex;height: 78px">
        <div style="flex: 1;margin-left: 40px"  @click="goPage('/index/earnings')">
          <p style="font-size: 40px;">
            <span style="font-size: 28px;">￥</span>18.00
          </p>
          <p style="font-size: 24px;color: #A8A8A8;display: flex;align-items: center;">
            本月收益
            <van-icon name="arrow" style="margin-left: 5px" size="12" />
          </p>
        </div>
        <div style="display: inline-flex;height: 100%;border-right: #000000 1px solid;opacity: 0.16;"></div>
        <div style="flex: 1;margin-left: 40px"  @click="goPage('/index/earnings/today')">
          <p style="font-size: 40px;">
            <span style="font-size: 28px;">￥</span>18.00
          </p>
          <p style="font-size: 24px;color: #A8A8A8;display: flex;align-items: center;">
            昨日收益
            <van-icon name="arrow" style="margin-left: 5px" size="12" />
          </p>
        </div>


      </div>
      <div class="arrow-down" @click="getPicture">
        <!--        下箭头-->
        收益曲线图&nbsp;&nbsp;<van-icon :style="{ transform: `rotate(${!pictureShow?0:180}deg)` }" class="transition"
                                        name="arrow-down" size="16" color="#A8A8A8" />
      </div>
      <p style="font-size: 24px;color: #222222;margin-left: 28px" v-if="pictureShow">收益(元)</p>
      <div style="width: 710px;height: 400px;margin: auto;padding-bottom: 20px" v-if="pictureShow">
        <uECharts :option="barOptionsReal" />
      </div>
      <div style="display: flex;justify-content: center;padding: 30px" v-if="pictureShow">
        <div :class="['ECharts_bottom',active===0?'active':'']" @click="changeActive(0)">
          七日内
        </div>
        <div :class="['ECharts_bottom',active===1?'active':'']" @click="changeActive(1)">

          30日内
        </div>
        <div :class="['ECharts_bottom',active===2?'active':'']" @click="changeActive(2)">
          90日内
        </div>
      </div>

    </div>
    <div style="height: 392px;background: #FFFFFF;border-radius: 20px">
      <div
        style="height: 84px;margin-top: 24px;border-top-left-radius: 32px;border-top-right-radius: 32px;">
        <div style="height: 84px;line-height: 84px;display: flex;justify-content: space-between">
          <div style="margin-left: 32px;font-weight: 500;
font-size: 36px;
display: flex;
align-items: center;
color: #222222;">
            节点情况
          </div>
          <div style="font-size: 28px;color: #222222;margin-right: 24px">
            业务介绍
            <van-icon name="arrow" color="#222222" />
          </div>

        </div>

      </div>
      <div style="display: flex;height: 78px;margin-top: 48px">
        <div style="flex: 1;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <p style="font-size: 48px;color: var(--primary-color)">
            42 <span style="font-size: 24px;">台</span>
          </p>
          <p style="font-size: 24px;color: #A8A8A8;display: flex;align-items: center;">
            盒子设备
          </p>
        </div>
        <div style="display: inline-flex;height: 100%;border-right: #000000 1px solid;opacity: 0.16;"></div>
        <div style="flex: 1;display: flex;align-items: center;justify-content: center;flex-direction: column">
          <p style="font-size: 48px;color: var(--primary-color)">
            42 <span style="font-size: 24px;">台</span>
          </p>
          <p style="font-size: 24px;color: #A8A8A8;display: flex;align-items: center;">
            盒子设备
          </p>
        </div>


      </div>
      <div
        style="width: 686px;height: 128px;background: rgba(24,105,255,0.12);;display: flex;align-items: center;justify-content: space-evenly;padding: 20px; margin: 30px auto auto;border-radius: 20px">

        <div>
          <p style="font-weight: bold;font-size: 40px;color: #333333;text-align: center">42</p>
          <p style="font-weight: 400;font-size: 24px;color: #A8A8A8;">节点总数</p>
        </div>
        <div style="display: inline-flex;height: 100%;border-right: #000000 1px solid;opacity: 0.16;"></div>
        <div>
          <p style="font-weight: bold;font-size: 40px;color: #333333;text-align: center">42</p>
          <p style="font-weight: 400;font-size: 24px;color: #A8A8A8;">节点总数</p>
        </div>
        <div style="display: inline-flex;height: 100%;border-right: #000000 1px solid;opacity: 0.16;"></div>
        <div>
          <p style="font-weight: bold;font-size: 40px;color: #30A264;text-align: center">42</p>
          <p style="font-weight: 400;font-size: 24px;color: #A8A8A8;">节点总数</p>
        </div>

      </div>

    </div>
    <img v-if="$theme==='one'"  @click="goPage('/index/team')" src="./image/团队管理-入口@2x.png" style="width: 710px;height: 216px;margin-top: 20px">
    <img v-else  @click="goPage('/index/team')" src="./imageTwo/团队管理-入口@2x.png" style="width: 710px;height: 216px;margin-top: 20px">
    <div style="display: flex;justify-content: space-between;width: 718px;margin-top: 20px"  v-if="$theme==='one'" >
      <img src="./image/常见问题@2x.png" style="flex: 1;height: 183px" @click="goPage('/index/often')">
      <div style="width: 20px"></div>
      <img src="./image/行业前瞻@2x.png" style="flex: 1;height: 183px" @click="goPage('/index/industry')">

    </div>
    <div style="display: flex;justify-content: space-between;width: 718px;margin-top: 20px;padding-bottom: 20px"  v-else >
      <img src="./imageTwo/常见问题@2x.png" style="width:345px;height: 160px" @click="goPage('/index/often')">
      <img src="./imageTwo/行业前瞻@2x.png" style="width:345px;height: 160px" @click="goPage('/index/industry')">

    </div>
  </frame-view>
</template>

<script>
import uECharts from '@/components/u-echerts.vue';
import * as echarts from 'echarts';
export default {
  props: {},
  data() {
    return {
      image: require('./image/通知@2x.png'),
      pictureShow: false,
      barOptions: {
        tooltip: {
          trigger: 'item',  // 鼠标悬停触发提示框
          formatter: '{b}: {c}'  // 自定义tooltip显示内容
        },
        grid: {
          top: '10%',
          bottom: '0%',
          right: '10%',
          left: '5%',
          containLabel: true  // 确保内容不会被遮挡
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,  // 确保折线图从X轴的零坐标开始
          axisLine: {
            show: true,  // 显示X轴线条
            lineStyle: {
              color: '#999999',
            }
          },
          axisTick: {
            show: true  // 显示X轴刻度
          },
          axisLabel: {
            fontSize: 12,  // X轴标签字体大小
            color: '#999999',
            margin: 10  // X轴标签和图表的距离
          },
          data: ['11/20', '11/21', '11/22', '11/23', '11/24', '11/25', '11/26']  // X轴的日期数据
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,  // 显示Y轴线条
            lineStyle: {
              color: '#999999',
            }
          },
          splitLine: {
            show: true,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 分隔线为虚线
              color: '#ccc'  // 分隔线的颜色
            }
          },
          axisTick: {
            show: true  // 显示Y轴刻度
          },
          axisLabel: {
            fontSize: 12,  // Y轴标签字体大小
            color: '#999999',
            margin: 10  // Y轴标签和图表的距离
          }
        },
        series: [
          {
            data: [10, 16, 42, 38, 78, 90, 99],  // 数据值
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向，从上到下
                [
                  { offset: 0, color: '#2671fd' }, // 渐变起点颜色 (上)
                  { offset: 1, color: '#ffffff' }  // 渐变终点颜色 (下)
                ]
              )
            },
            lineStyle: {
              width: 3,  // 设置线条宽度
              color: '#2671fd'  // 设置线条颜色
            },
            symbol: 'circle',  // 设置数据点为圆形标记
            symbolSize: 6,  // 设置圆点大小
            itemStyle: {
              color: 'white',  // 设置圆点背景色为白色
              borderColor: '#2671fd',  // 设置圆点边框颜色
              borderWidth: 3  // 设置圆点边框宽度
            }
          }
        ]
      },
      active: 0,
      barData:{
        day:{
          xAxisData:['11/20', '11/21', '11/22', '11/23', '11/24', '11/25', '11/26'],
          seriesData:[10, 16, 42, 38, 78, 90, 99]
        },
        month:{
          xAxisData:['11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
          seriesData:[140, 160, 420, 380, 780, 900, 990, 1000, 1200, 1300, 1400, 1500]
        },
        quarter:{
          xAxisData:['第一季度', '第二季度', '第三季度', '第四季度'],
          seriesData:[4000, 5000, 6000, 7000]
        }
      },
      barActive: 'day'
    };
  },
  computed: {
    barOptionsReal() {
      const options = JSON.parse(JSON.stringify(this.barOptions));
      options.xAxis.data = this.barData[this.barActive].xAxisData;
      options.series[0].data = this.barData[this.barActive].seriesData;
      return options;
    }
  },
  created() {
    if (this.$theme !== 'one') {
      this.image = require('./imageTwo/通知@2x.png');
    }
  },
  mounted() {
  },
  watch: {},
  methods: {
    goPage(path) {
      this.$router.push(path);
    },
    getPicture() {
      this.pictureShow = !this.pictureShow;
    },
    changeActive(index) {
      this.active = index;
      if (index === 0) {
        this.barActive = 'day';
      } else if (index === 1) {
        this.barActive = 'month';
      } else {
        this.barActive = 'quarter';
      }
    }
  },
  components: {
    // [Button.name]: Button
    uECharts
  }
};
</script>

<style scoped lang="scss">
.laba{
  :deep(.van-icon__image){
    width: 36px;
    height: 36px;
  }
}
.arrow-down {
  color: #A8A8A8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding-bottom: 20px;
}

.ECharts_bottom {
  margin-left: 20px;
  border-radius: 28px;
  width: 128px;
  height: 56px;
  background-color: #f4f4f4;
  color: #626262;
  line-height: 56px;
  text-align: center;
  transition: all 0.3s;
  &.active {
    background-color: #000;
    color: #FFFFFF;
  }
}

.transition {

  transition: all 0.3s;
}

.title {
  width: 192px;
  height: 48px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 48px;
  color: #FFFFFF;
  line-height: 48px;
  text-align: left;
  font-style: normal;
  margin-top: 20px;
}

.index {
  background-image: url('./image/背景@2x.png');
  background-size: 100% 50%;
  background-repeat: no-repeat;
  display: flex;
  font-size: 28px;
}


.indexTwo {
  background-size: 100% 50%;
  background: linear-gradient(180deg, #1A9988 0%, #F7F7F7 30%) no-repeat;
  display: flex;
  font-size: 28px;
}

</style>
